import Head from "next/head"; import Image from "next/image"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import Content from "@/components/home/content"; import Modal from "@/components/modal"; import { signIn, useSession } from "next-auth/react"; import AniList from "@/components/media/aniList"; import ListEditor from "@/components/listEditor"; import DetailTop from "@/components/anime/mobile/topSection"; import AnimeEpisode from "@/components/anime/episode"; import { useAniList } from "@/lib/anilist/useAnilist"; import Footer from "@/components/shared/footer"; import { mediaInfoQuery } from "@/lib/graphql/query"; import MobileNav from "@/components/shared/MobileNav"; import Characters from "@/components/anime/charactersCard"; import { redis } from "@/lib/redis"; export default function Info({ info, color }) { const { data: session } = useSession(); const { getUserLists } = useAniList(session); const [loading, setLoading] = useState(false); const [progress, setProgress] = useState(0); const [statuses, setStatuses] = useState(null); const [domainUrl, setDomainUrl] = useState(""); const [watch, setWatch] = useState(); const [open, setOpen] = useState(false); const { id } = useRouter().query; const rec = info?.recommendations?.nodes?.map( (data) => data.mediaRecommendation ); useEffect(() => { handleClose(); async function fetchData() { setLoading(true); if (id) { try { setDomainUrl(window.location.origin); setProgress(0); setStatuses(null); if (session?.user?.name) { const res = await getUserLists(info.id); const user = res?.data?.Media?.mediaListEntry; if (user) { setProgress(user.progress); const statusMapping = { CURRENT: { name: "Watching", value: "CURRENT" }, PLANNING: { name: "Plan to watch", value: "PLANNING" }, COMPLETED: { name: "Completed", value: "COMPLETED" }, DROPPED: { name: "Dropped", value: "DROPPED" }, PAUSED: { name: "Paused", value: "PAUSED" }, REPEATING: { name: "Rewatching", value: "REPEATING" }, }; setStatuses(statusMapping[user.status]); } } } catch (error) { console.error(error); } finally { setLoading(false); } } } fetchData(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [id, info, session?.user?.name]); function handleOpen() { setOpen(true); document.body.style.overflow = "hidden"; } function handleClose() { setOpen(false); document.body.style.overflow = "auto"; } return ( <> {info ? info?.title?.romaji || info?.title?.english : "Retrieving Data..."} handleClose()}>
{!session && (
Edit your list
)} {session && info && ( )}
{info?.bannerImage && ( banner anime )}
{info?.characters?.edges && (
)} {info && rec?.length !== 0 && (
)}